<template>
	<view class="">
		<view class="category-module ">
			<scroll-view  :scroll-left="scrollLeft" @scroll="scroll" scroll-with-animation :show-scrollbar="false" class="categoryBox menu-scroll-view" duration="200" style="white-space: nowrap;"  scroll-x>
				<view class="categoryView ">
					<view @click="changeSubTop(index)"  :class="['categoryItem',firstCateIdIndex==index?'curBox':'']" v-for="(info,index) in subjectList">
						<view class="imgBox ">
							<u-image width="120" height="120" :src="info.icon" borderRadius="50%"></u-image>
						</view>
						<text class="categoryName u-line-1 u-text-center" style="width: 120rpx;">{{info.subjectName}}</text>
					</view>
				</view>
			</scroll-view>
			<view class="popControl " @click="showMore">
				<text class="popControlText ">全</text>
				<text class="popControlText ">部</text>
				<nmr-icon name="weibiaoti2fuzhi07" size="24" color="#48A147"></nmr-icon>
			</view>
		</view>
		<!-- :style="{'top:calc(44px +'+statusHeight+'px)'}"  -->
		<view class="categoryPop " :style="{top:statusHeight+'px'}" v-if="categoryPopShow">
			<view :class="['mask','',maskShow?'show':'']"></view>
			<view :class="['categoryPopMain','',popMainShow?'show':'']">
				<view class="popTitle ">
					<text class="title ">全部分类</text>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class="df aic" style="flex-wrap: wrap;">
						<view :class="['categoryItem','',firstCateIdIndex==index?'current':'']" @click="changeSubTop(index)"  v-for="(info,index) in subjectList">
							<view class="imgBox _div ">
								<u-image style="border: 4rpx solid white;border-radius: 50%;" width="88" height="88" :src="info.icon"  borderRadius="50%"></u-image>
							</view>
							<text class="categoryName fs24 u-line-1">{{info.subjectName}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="popBottom df aic" @click="hidderShow">点击收起 <nmr-icon name="xiajiantou" color="#666666" size="28" style="transform: rotate(-180deg);margin-left: 10rpx;"></nmr-icon>   </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['subjectList'],
		data() {
			return {
				categoryPopShow: false,
				maskShow:false,
				popMainShow:false,
				firstCateIdIndex: 0,
				statusHeight:0,
				scrollLeft:0,
				menuItemWidth:0,
				menuWidth:0
			}
		},

		methods:{
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
			return 	new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.width;
							resolve();
					}).exec();
				})
			},
			async leftMenuStatus(index) {
				// 如果为0，意味着尚未初始化
				this.$nextTick(async () =>{
					if (this.menuWidth == 0 || this.menuItemWidth == 0) {
						await this.getElRect('menu-scroll-view', 'menuWidth');
						await this.getElRect('categoryItem', 'menuItemWidth');
						
					}
					let item = this.menuItemWidth+uni.upx2px(30)
					this.scrollLeft = Number(index) * item - (item)/2 - this.menuWidth / 2 +item
				})
				
			},
			changeSubTop(index){
				this.$emit('change',index)
			},
			changeDone(index){
				this.firstCateIdIndex = index
				// this.scrollLeft = index*uni.upx2px(154)
				// this.hidderShow()
				this.leftMenuStatus(this.firstCateIdIndex)
				
			},
			showMore(){
				
				this.categoryPopShow = true
				console.log(22333)
				this.$nextTick(() =>{
					this.maskShow = true
					this.popMainShow = true
				})
			},
			scroll(e){
				this.$u.debounce(() =>{
					this.scrollLeft = e.detail.scrollLeft
				}, 500)
			},
			hidderShow(){
				this.maskShow = false
				this.popMainShow = false
				this.$nextTick(() =>{
					this.categoryPopShow = false
				})
					
			}
		},
		async mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.statusHeight =(res.platform == 'ios' ? 44 : 48) + res.statusBarHeight
					that.showMore()
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.categoryPop {
		bottom: 0;
		overflow: hidden;
		position: fixed;
		right: 0;
		width: 100vw;
		z-index: 3001
	}

	.categoryPop .mask {
		background-color: rgba(0, 0, 0, .3);
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		transition: opacity .2s ease-in-out;
		width: 100%
	}

	.categoryPop .mask.show {
		opacity: 1
	}

	.categoryPop .categoryPopMain {
		align-items: center;
	
background: linear-gradient(90deg, #ECFFEB 0%, #FFF4F0 100%);
		border-radius: 0 0 32rpx 32rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		left: 0;
		padding: 0 20rpx;
		position: absolute;
		top: 0;
		transform: translateY(-100%);
		transition: -webkit-transform .2s ease-in-out;
		transition: transform .2s ease-in-out;
		transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
		width: 100%
	}

	.categoryPop .categoryPopMain .popTitle {
		align-items: center;
		display: flex;
		height: 16vw;
		justify-content: space-between;
		opacity: 0;
		transition: opacity .2s ease-in-out .3s;
		width: 100%
	}

	.categoryPop .categoryPopMain .popTitle .title {
		font-size: 28.99rpx;
		font-weight: 600;
		color: #48A147;
		
	}

	.categoryPop .categoryPopMain .categoryItem {
		align-items: center;
		border-radius: 0 0 32rpx 32rpx;
		display: flex;
		flex-direction: column;
		// height: 144.93rpx;
		justify-content: center;
		opacity: 0;
		transition: opacity .2s ease-in-out .3s;
		width: calc((100vw - 40rpx)/5)
	}

	.categoryPop .categoryPopMain .categoryItem .imgBox {
		align-items: center;
		border: 1px solid hsla(0, 0%, 100%, 0);
		box-sizing: border-box;
		display: flex
	}

	.categoryPop .categoryPopMain .categoryItem .imgBox .cacheImage {
		border: 1px solid hsla(0, 0%, 100%, 0);
		display: block;
		height: 12vw;
		width: 12vw
	}

	.categoryPop .categoryPopMain .categoryItem .categoryName {
		line-clamp: 1;
		-webkit-box-orient: vertical;
		border-radius: 32rpx;
		display: -webkit-box;
		font-size: 21.74rpx;
		margin-top: 8rpx;
		overflow: hidden;
		padding: 2rpx 12rpx;
		text-overflow: -o-ellipsis-lastline;
		text-overflow: ellipsis;
		margin-bottom: 10rpx;
	}

	.categoryPop .categoryPopMain .categoryItem.current .imgBox {
		border-color: #38c583;
		border-radius: 50%;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-width: 4rpx;
	}

	.categoryPop .categoryPopMain .categoryItem.current .cacheImage {
		border-color: #a8edcd;
		border-radius: 30rpx
	}

	.categoryPop .categoryPopMain .categoryItem.current text {
		
background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		color: #fff
	}

	.categoryPop .categoryPopMain.show {
		transform: translateY(0)
	}

	.categoryPop .categoryPopMain.show .categoryItem,
	.categoryPop .categoryPopMain.show .popTitle {
		opacity: 1
	}

	.categoryPop .categoryPopMain .popBottom {
		border-top: 1rpx solid #FFF4F0;
		font-size: 26rpx;
		align-items: center;
		color: #999;
		display: flex;
		justify-content: center;
		padding: 15rpx 0;
		width: 100%;
		margin-top: 25rpx;
	}

	.categoryPop .categoryPopMain .popBottom .icon {
		margin-left: 10rpx
	}

	.category-module {
		padding: 20rpx 30rpx;
		// background: linear-gradient(180deg, #eff7f4 10%, #fff);
		display: flex
	}

	.category-module .categoryBox {
		// height: 170.29rpx;
		width: calc(100vw - 100rpx)
	}

	.category-module .categoryBox .categoryView {
		display: inline-flex;
		height: 100%;
	}

	.category-module .categoryBox .categoryView .categoryItem {
		align-items: center;
		border-radius: 0 0 32rpx 32rpx;
		display: flex;
		flex-direction: column;
		font-size: 21.74rpx;
		justify-content: space-evenly;
		margin-right: 30rpx;
		// width: calc((100vw - 20rpx)/5)
	}

	.category-module .categoryBox .categoryView .categoryItem .imgBox {
		align-items: center;
		border: 1px solid hsla(0, 0%, 100%, 0);
		box-sizing: border-box;
		display: flex
	}

	.category-module .categoryBox .categoryView .categoryItem .imgBox .cacheImage {
		border: 1px solid hsla(0, 0%, 100%, 0);
		display: block;
		height: 12vw;
		width: 12vw
	}

	.category-module .categoryBox .categoryView .categoryItem .categoryName {
		margin-top: 16rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		padding: 2rpx 12rpx
	}

	.category-module .categoryBox .categoryView .categoryItem.curBox .imgBox {
		border-color: #38c583;
		border-radius: 50%;
		border-width: 4rpx;
	}

	.category-module .categoryBox .categoryView .categoryItem.curBox .cacheImage {
		border-color: #a8edcd;
		border-radius: 30rpx
	}

	.category-module .categoryBox .categoryView .categoryItem.curBox .categoryName {
		
background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		color: #fff
	}

	.category-module .popControl {
		margin-right: -30rpx;
		align-items: center;
		color: #19b95f;
		display: flex;
		flex: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center
	}

	.category-module .popControlText {
		font-size: 21.74rpx;
		font-weight: 400
	}





	
</style>